<link href="/src/style/select2.min.css" rel="stylesheet" />
<script type="text/javascript">
var jQuery = layui.$
</script>
<script src="/src/lib/select2.min.js"></script>

<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">首页</a>
    <a><cite>节点管理</cite></a>
    <a><cite>监控统计</cite></a>
    <a><cite>实时监控</cite></a>
  </div>
</div>
<style type="text/css">
.select2-container .select2-selection--multiple {min-height: 30px;}
.layui-card-body  {line-height: 18px;}
.active-btn {
  border: 1px solid #009688 ! important;
  color: #009688
}
.select2-container .select2-search--inline .select2-search__field {padding-left: 5px;}
</style>

<div class="layui-fluid" id="component-tabs">
  <div class="layui-row">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body">
          <div class="layui-tab layui-tab-brief" lay-filter="node-monitor-tab">
            <ul class="layui-tab-title">
              <li class="layui-this">带宽</li>
              <li>连接</li>
              <li>负载</li>
              <li>硬盘</li>
            </ul>
            <div class="layui-tab-content">
              <div class="layui-row layui-col-space15">
                <div class="layui-col-lg2 layui-col-md4">
                  <input style="display:none" type="password" name="pass"/>
                  <select lay-ignore class="nodes form-control" style="width: 100%;height:30px;" name="nodes">
                  </select>
                </div>  
                <div class="layui-col-md8">
                  <div class="layui-btn-group">
                    <button type="button" data-hour=1 class="layui-btn layui-btn-primary layui-btn-sm hours active-btn">1小时实时</button>
                    <button type="button" data-hour=6 class="layui-btn layui-btn-primary layui-btn-sm hours">近6小时</button>
                    <button type="button" data-hour=12 class="layui-btn layui-btn-primary layui-btn-sm hours">近12小时</button>
                    <button type="button" id="date_tip" class="layui-btn layui-btn-primary  layui-btn-sm">自定义 <i class="layui-icon">&#xe637;</i></button>
                    <button type="button" id="date" class="layui-btn layui-btn-primary layui-btn-sm layui-hide"></button>
                  </div>

                  <button id="query" type="button" class="layui-btn layui-btn-sm">查询</button>
                </div>
                <div class="layui-col-md2">
                  
                </div>
              </div>               
              <div class="layui-tab-item layui-show">
                  <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12 nic">

                    </div>
                  </div>
              </div>
              <div class="layui-tab-item">
                  <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                      <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade">
                        <div carousel-item id="nginx-status">
                          <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                        </div>
                      </div>
                    </div>

                    <div class="layui-col-md12">
                      <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade">
                        <div carousel-item id="tcp-conn">
                          <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                        </div>
                      </div>
                    </div>

                  </div>
              </div>
              <div class="layui-tab-item">
                  <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                      <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade">
                        <div carousel-item id="cpu">
                          <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                        </div>
                      </div>
                    </div>

                    <div class="layui-col-md12">
                      <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade">
                        <div carousel-item id="load">
                          <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                        </div>
                      </div>
                    </div>

                    <div class="layui-col-md12">
                      <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade">
                        <div carousel-item id="mem">
                          <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                        </div>
                      </div>
                    </div>

                  </div>

              </div>
              <div class="layui-tab-item layui-show">
                  <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12 disk">

                    </div>
                  </div>
              </div>

            </div>
          </div>
        </div>
      </div>

   </div>
</div>

<script>
layui.use('node_senior', layui.factory('node_senior'));
layui.use(['admin', 'table','laydate'], function(){
  var $ = layui.$
  ,admin = layui.admin
  ,element = layui.element
  ,router = layui.router();
  element.render();
});
</script>
